<template>
  <el-drawer
      :title="'评阅'+'-'+taskForm.userId+'-'+taskForm.title"
      v-model="editVisible"
      top="1vh"
      @close="handleDigClose"
      direction="ltr"
      custom-class="demo-drawer"
      size="95%"
  >
    <el-container style="height: 90vh">
      <el-aside class="aside-container" style="width: 70%;">
      <el-card >
        {{ taskForm.message }}
      </el-card>
        <el-card style="height: 50%;margin-top: 5px" >
          规则
          <el-table :data="tableData"  :row-style="tableRowStyle" :cell-style="{'text-align':'center'}" :header-cell-style="{'text-align':'center'}"
                    border resizable="true" style="width: 100%" >
            <el-table-column prop="id" label="ID" sortable/>
            <el-table-column prop="message" label="规则内容"/>
            <el-table-column prop="percent" label="分值占比"/>
          </el-table>
        </el-card>
      </el-aside>


      <el-main class="form-container" style="height:88vh;padding-top: 0px">
        <div style="height:60px">
          <el-button type="primary" size="mini" icon="el-icon-arrow-left" @click="handlePreTask">上一个</el-button>
          <el-button type="primary" size="mini" @click="handleNextTask">下一个<i class="el-icon-arrow-right el-icon--right"></i></el-button>
        </div>
        <div style="height: 10vh;">

          <h2 style="text-align: center">打分模块</h2>
          <div v-for="(item,index) in scoreData" :key="index" style="margin-left: 20px">
            <el-form style="display: flex;"   >
              <el-form-item
                  :model="item"
              >
                {{ item.message }}:
              </el-form-item>

              <el-form-item
                  :model="item"
                  label="分数"
              >
                <el-input v-model="item.score"></el-input>
              </el-form-item>
            </el-form>


          </div>
          <div>
            总分:{{allScore}}
          </div>

          <div style="text-align:center;margin-top: 50px">
            <el-button size="large" @click="submitScore">确定</el-button>
          </div>
        </div>


      </el-main>
    </el-container>
  </el-drawer>
</template>

<script>
import request from "@/utils/request";
import {ElMessage} from "element-plus";
import single from "@/views/rules/single";
import double from "@/views/rules/double";

export default {
  name: "taskReview",

  props:{
    taskForm: {
      type: Object,
      default() {
        return {}
      }
    },


    idx: {
      type: Number,
      default:-1
    },
    editVisible:{
      type:Boolean,
      default:false
    },


  },

  computed:{
      allScore(){
        return this.scoreData.reduce((prev, next) => {
          if (next.score != "" && next.score !=null){
            return parseFloat(prev) + (parseFloat(next.score) * parseFloat(next.percent) / 100)
          }

        },0)

      },
  },



  data(){
    return{
      gameId: sessionStorage.getItem("gameId")||null,
      noReviewList:[],
      user:{},
      scoreForm:{
        gameId:0,
        judgeId:0,
        itemId:0,
        score:"0"

      },
      tableData:[],
      scoreData:[],
      total:0,
    }
  },

  watch:{
    'taskForm.id': {
      handler: function (val) {

          request.get("/itemgame/noReviewList/"+this.gameId).then(res=>{
            this.noReviewList=res.data
            // console.log(this.noReviewList)
          })

        // this.$refs.tree.setCheckedKeys([]);
        this.textarea = ''

        // console.log('taskTypeList', this.taskTypeList)
      },
      deep: true
    },
  },
created() {
this.load()
},

  methods:{
    submitScore(){
      this.scoreForm.itemId=this.idx
      this.scoreForm.score=this.allScore
      this.scoreForm.gameId=this.gameId
      this.scoreForm.judgeId=this.user.id
      console.log(this.scoreForm)
      request.post("/score/returnScore",this.scoreForm).then(res =>{

        if (res.code === 200) {
          ElMessage({
            type: "success",
            message: "提交成功"
          })
        } else {
          ElMessage({
            type: "error",
            message: "提交失败"
          })
        }
      })
    },
    tableRowStyle({ row, rowIndex }) {
      return { background:'#F2F6FC', color: '#0052d9', 'font-weight': 600 }
    },
    load(){
      // console.log(this.idx)
      this.user=JSON.parse(localStorage.getItem("user"))
      this.scoreForm.gameId=JSON.parse(sessionStorage.getItem("gameId"))
      request.get("/game/rules/"+this.gameId).then(res =>{
        // console.log(res)
        this.tableData=res.data
        this.scoreData=res.data
      })

    },


    handlePreTask() {
      let item = undefined;
      //根据当前id查询当前任务在列表中的索引
      let index = this.noReviewList.findIndex((item) => item.id === this.taskForm.id)
      if (index === 0) {
        item = this.noReviewList[this.noReviewList.length - 1];
      } else {
        index = index - 1;
        item = this.noReviewList[index]
      }
      this.taskForm.id = item.id;
      this.taskForm.userId = item.userId;
      this.taskForm.title = item.title;
      this.taskForm.message = item.message;
      // this.getTaskRevSta()
    },
    handleNextTask() {
      // this.$refs.tree.setCheckedKeys([])
      // this.textarea = ''
      // this.repeatRes = {}

      let item = undefined;
      //根据当前id查询当前任务在列表中的索引

      let index = this.noReviewList.findIndex((item) =>item.id === this.taskForm.id)
      console.log(index)
      console.log(this.noReviewList.length)
      if (index === this.noReviewList.length - 1) {
        item = this.noReviewList[0];
      } else {
        index = index + 1;
        item = this.noReviewList[index]
      }
      this.taskForm.id = item.id;
      this.taskForm.userId = item.userId;
      this.taskForm.title = item.title;
      this.taskForm.message = item.message;

      // this.getTaskRevSta()

    },

  }
}
</script>

<style lang="less">

.aside-container {
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  width: 50%;
  height: 100%;
}

</style>